﻿
@{
    ViewBag.Title = "添加群空间";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>

    .img-wrapper-titlephoto{
        position:relative;
    }
    .img-wrapper-titlephoto .close{
        position:absolute;
        width:100%;
        height:20px;
        background-color:rgba(0,0,0,.8);
        left:0;
        bottom:0;
        z-index:5;
    }
     .img-wrapper-titlephoto .close span{
         text-align:center;
         color:#fff;
     }
    .img-wrapper-titlephoto .close:hover{
           background-color:rgba(0,0,0,.8);
    }

</style>

<section class="content-header">
    <h1>
        添加群空间
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li class="active">添加群空间</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="box box-primary">
            <div class="box-body">
                <div class="form-group">
                    <label for="commentSection">所属板块</label>
                    <select class="form-control select2" id="commentSection" style="width: 25%;">
                        <option value="1">随笔</option>
                        <option value="2">游记</option>
                        <option value="3">求助</option>
                        <option value="4">心情</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="commentSection">群空间</label>
                    <select class="form-control select2" id="commentGroup" style="width: 25%;">
                        @foreach (var item in @ViewBag.CarGroups)
                        {
                            <option value="@item.CarGroupID">@item.CarGroupName</option>
                        }
                    </select>
                </div>
                <div class="form-group">
                    <label for="commentDesc">头图</label>
                    <div class="form-control" style="border-width:0px;">
                        <div id="HeadImageUrl" class="col-sm-10 dm-uploader">
                            <div role="button" class="btn btn-primary mr-2">
                                <i class="fa fa-fw fa-folder-o"></i>图片上传
                                <input type="file" title="Click to add Files">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <table>
                        <tr>
                            <td>
                                <div id="divImg1" class="img-wrapper-titlephoto fl" style="display: none;">
                                    <button type="button" onclick="deleteImage(1)" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto1" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl1" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg2" class="img-wrapper-titlephoto fl" style="display: none;">
                                    <button type="button" class="close" onclick="deleteImage(2)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto2" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl2" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg3" class="img-wrapper-titlephoto fl" style="display: none;">

                                    <button type="button" class="close" onclick="deleteImage(3)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto3" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl3" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg4" class="img-wrapper-titlephoto fl" style="display: none;">

                                    <button type="button" class="close" onclick="deleteImage(4)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto4" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl4" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg5" class="img-wrapper-titlephoto fl" style="display: none;">

                                    <button type="button" class="close" onclick="deleteImage(5)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto5" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl5" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg6" class="img-wrapper-titlephoto fl" style="display: none;">
                                    <button type="button" class="close" onclick="deleteImage(6)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto6" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl6" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg7" class="img-wrapper-titlephoto fl" style="display: none;">

                                    <button type="button" class="close" onclick="deleteImage(7)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto7" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl7" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg8" class="img-wrapper-titlephoto fl" style="display: none;">

                                    <button type="button" class="close" onclick="deleteImage(8)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto8" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl8" />
                                </div>
                            </td>
                            <td>
                                <div id="divImg9" class="img-wrapper-titlephoto fl" style="display: none;">

                                    <button type="button" class="close" onclick="deleteImage(9)" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <img id="imgPhoto9" style="width: 160px; height: 80px;border:1px solid #ccc " />
                                    <input type="hidden" id="hidDbUrl9" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="form-group">
                    <label for="commentDesc">文章详情</label>
                    <!-- 加载编辑器的容器 -->
                    <textarea rows="5" id="commentDetail" cols="20" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <label for="commentDesc">评论1</label>
                    <!-- 加载编辑器的容器 -->
                    <textarea rows="5" id="comment1" cols="20" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <label for="commentDesc">评论2</label>
                    <!-- 加载编辑器的容器 -->
                    <textarea rows="5" id="comment2" cols="20" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <label for="commentDesc">评论3</label>
                    <!-- 加载编辑器的容器 -->
                    <textarea rows="5" id="comment3" cols="20" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <label for="commentDesc">评论4</label>
                    <!-- 加载编辑器的容器 -->
                    <textarea rows="5" id="comment4" cols="20" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <label for="commentDesc">评论5</label>
                    <!-- 加载编辑器的容器 -->
                    <textarea rows="5" id="comment5" cols="20" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <input type="button" style="width:5%" class="btn btn-primary" id="save" value="发布" />
                </div>
            </div>
        </div>

    </div>
</section>
@section scriptsBottom{
    <script type="text/javascript">
        $(function () {
            renderImg();
            binds();
        });

        function binds() {
            $("#save").on("click", function () {
                save(1);
            });
        }

        function deleteImage(i) {
            $("#imgPhoto" + i).attr("src",'###');
            $("#hidDbUrl" + i).val('');//存数据库里的相对路径
            $("#divImg" + i).hide();
        }

        function save() {
            var data = {
                Detail: $("#commentDetail").val(),
                CommentSection: $("#commentSection").val(),
                CarGroupID: $("#commentGroup").val(),
                CommentImgs: [],
                Comments:[]
            };
            for (var i = 1; i < 10; i++) {
                var tmp=$("#hidDbUrl"+i).val();
                if (tmp) {
                    data.CommentImgs.push({
                        ImageUrl: tmp,
                        ImageSort: i
                    });
                }
            }
            for (var i = 1; i < 10; i++) {
                var tmp = $("#comment" + i).val();
                if (tmp) {
                    data.Comments.push(tmp);
                }
            }

            //console.log(data);
            var url = "@Url.Action("CommentSave", "GroupComment")";
            BMCW.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        //草稿留在当前页
                        if (data.isShow == 0) {
                            BMCW.alert("保存草稿成功");
                        } else {
                            BMCW.alert("发布成功");
                            window.location.href = "@Url.Action("GroupCommentIndex", "GroupComment")";
                        }
                    } else {
                        BMCW.alert(res.message);
                    }
                }
            });
        }

         function renderImg() {
            $('#HeadImageUrl').dmUploader({ //
                url: '@Url.Action("UploadImg", "Product")',
                maxFileSize: 3000000, // 3 Megs max
                multiple: false,
                allowedTypes: 'image/*',
                extFilter: ['jpg', 'jpeg', 'png', 'gif'],
                onUploadSuccess: function (id, response) {
                    if (response.status==0) {
                        var oData = response.data;
                        for (var i = 1; i < 10; i++) {
                            var tmp=$("#hidDbUrl"+i).val();
                            if (tmp == "" || tmp == null) {
                                $("#imgPhoto" + i).attr("src", oData.HttpImgUrl);
                                $("#hidDbUrl" + i).val(oData.ImgUrl);//存数据库里的相对路径
                                $("#divImg" + i).show();
                                break;
                            }
                        }
                    } else {
                        alert(response.data.message);
                    }
                }
            });
        }
    </script>

}

